<template>
  <div>
    <DatePick class="mb12" v-model="dateRange2" />

    <SearchCom :searchList="searchList" @search="handleSearch" @reset="handleReset" />

    <el-table :data="tableData2" style="width: 100%" class="cover-table" border>
      <el-table-column prop="date" :label="t('member.序号')" type="index" sortable />
      <el-table-column prop="date" :label="t('member.会员名')" />
      <el-table-column prop="orderCount" :label="t('member.下单数')" sortable />
      <el-table-column prop="orderAmount" :label="t('member.下单金额')" sortable />
      <el-table-column prop="payOrderCount" :label="t('member.支付订单数')" sortable />
      <el-table-column prop="payOrderCount" :label="t('member.支付金额')" sortable />
      <el-table-column prop="payOrderCount" :label="t('member.退单数')" sortable />
      <el-table-column prop="payOrderCount" :label="t('member.退单金额')" sortable />
    </el-table>

    <div class="flex justify-end mt10">
      <el-pagination
        v-model:current-page="pageInfo2.currentPage"
        v-model:page-size="pageInfo2.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo2.total"
        @size-change="handleReportSizeChange"
        @current-change="handleReportCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import moment from "moment";
import DatePick from "@/components/datePick.vue";
import SearchCom from "@/components/searchCom.vue";

const { t } = useI18n();

const searchList = [
  {
    label: t('member.用户名'),
    key: "userName",
    type: "input",
  },
];

const dateRange2 = ref(moment().format("YYYY-MM-DD"));
const pageInfo2 = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});

const tableData2 = ref(
  Array.from({ length: 10 }, (_, index) => ({
    date: moment().add(index, "day").format("YYYY-MM-DD"),
    orderCount: Math.floor(Math.random() * 100),
    orderUserCount: Math.floor(Math.random() * 100),
    orderAmount: Math.floor(Math.random() * 1000),
    payOrderCount: Math.floor(Math.random() * 100),
    payUserCount: Math.floor(Math.random() * 100),
    payAmount: Math.floor(Math.random() * 1000),
  }))
);

const handleReportSizeChange = (size) => {
  pageInfo2.value.pageSize = size;
};
const handleReportCurrentChange = (current) => {
  pageInfo2.value.currentPage = current;
};

const handleSearch = (params) => {
  // currentPage.value = 1;
  // filters.value = params;
  // getDataList();
};

const handleReset = () => {
  // filters.value = {}
  // currentPage.value = 1;
  // getDataList();
};
</script>
<style lang="scss" scoped></style>
